import CommonDrawer from '@/components/CommonDrawer';
import CommonTable from '@/components/CommonTable';
import {
  CHARGE_GUN_STATE_MAP,
  CHARGE_TYPE_MAP,
  STATE_OPTIONS,
  SUPPORT_OPTIONS,
  TYPE_OPTIONS,
} from '@/constants/enums';
import request from '@/utils/request';
import { useAsyncEffect, useRequest } from 'ahooks';
import { Descriptions } from 'antd';
import styles from './index.less';

// 通用枚举值映射函数
const getEnumLabel = (value, options) => {
  const option = options.find((item) => item.value === value);
  return option ? option.label : value;
};

const Detail = (props) => {
  const { open, record, onCancel, onOk } = props;

  const { data: deviceList, runAsync: runAsyncDeviceList } = useRequest(
    async (params) => {
      const res = await request({
        url: '/datas/charge/device/list',
        method: 'GET',
        params,
      });
      return res;
    },
    { manual: true },
  );

  const { data: gunList, runAsync: runAsyncGunList } = useRequest(
    async (params) => {
      const res = await request({
        url: '/datas/charge/gun/list',
        method: 'GET',
        params,
      });
      return res;
    },
    { manual: true },
  );

  // 加载详情数据
  useAsyncEffect(() => {
    if (open && record) {
      runAsyncDeviceList({
        chargeStationId: record.chargeStationId,
        index: 0,
        size: 0,
      });
      runAsyncGunList({
        chargeStationId: record.chargeStationId,
        index: 0,
        size: 0,
      });
    }
  }, [open, record]);

  const items = [
    {
      key: 'chargeStationName',
      label: '充电站名称',
      children: record?.chargeStationName || '-',
    },
    {
      key: 'fullName',
      label: '全称',
      children: record?.fullName || '-',
    },
    {
      key: 'state',
      label: '状态',
      children: getEnumLabel(record?.state, STATE_OPTIONS),
    },
    {
      key: 'chargeStationCode',
      label: '充电站编号',
      children: record?.chargeStationCode || '-',
    },
    {
      key: 'total',
      label: '设备数量',
      children: record?.total || 0,
    },
    {
      key: 'charging',
      label: '充电',
      children: getEnumLabel(record?.charging, SUPPORT_OPTIONS),
    },
    {
      key: 'changing',
      label: '换电',
      children: getEnumLabel(record?.changing, SUPPORT_OPTIONS),
    },
    {
      key: 'joining',
      label: '交接',
      children: getEnumLabel(record?.joining, SUPPORT_OPTIONS),
    },
    {
      key: 'servicePrice',
      label: '服务费',
      children: record?.servicePrice ? `${record?.servicePrice}元` : '-',
    },
    {
      key: 'address',
      label: '地址',
      children: record?.address || '-',
    },
    {
      key: 'contacts',
      label: '联系人',
      children: record?.contacts || '-',
    },
    {
      key: 'phone',
      label: '电话',
      children: record?.phone || '-',
    },
    {
      key: 'lng',
      label: '经度',
      children: record?.lng || 0,
    },
    {
      key: 'lat',
      label: '纬度',
      children: record?.lat || 0,
    },
    {
      key: 'radius',
      label: '半径',
      children: record?.radius ? `${record?.radius}米` : '-',
    },
    {
      key: 'area',
      label: '面积',
      children: record?.area ? `${record?.area}平方公里` : '-',
    },
    {
      key: 'type',
      label: '围栏类型',
      children: getEnumLabel(record?.type, TYPE_OPTIONS),
      span: 2,
    },
    {
      key: 'remark',
      label: '备注',
      children: record?.remark || '-',
      span: 2,
    },
    {
      key: 'points',
      label: '区域点',
      children: record?.points || '-',
      span: 4,
    },
  ];

  const deviceColumns = [
    {
      title: '序号',
      fixed: 'left',
      width: 65,
      render: (text, record, index) => index + 1,
    },
    {
      title: '充电站',
      dataIndex: 'chargeStationName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '设备编号',
      dataIndex: 'chargeDeviceCode',
      fixed: 'left',
      width: 180,
    },
    {
      title: '设备名称',
      dataIndex: 'chargeDeviceName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '充电类型',
      dataIndex: 'chargeType',
      width: 120,
      render: (text) => CHARGE_TYPE_MAP[text],
    },
    {
      title: '功率（kw）',
      dataIndex: 'powers',
      width: 120,
    },
    {
      title: '充电枪数',
      dataIndex: 'total',
      width: 100,
    },
    {
      title: '系统时间',
      dataIndex: 'time',
      width: 180,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 140,
    },
  ];

  const gunColumns = [
    {
      title: '序号',
      fixed: 'left',
      width: 65,
      render: (text, record, index) => index + 1,
    },
    {
      title: '充电站',
      dataIndex: 'chargeStationName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '充电设备',
      dataIndex: 'chargeDeviceName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '充电枪编号',
      dataIndex: 'chargeGunCode',
      fixed: 'left',
      width: 150,
    },
    {
      title: '充电枪名称',
      dataIndex: 'chargeGunName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: 100,
      render: (text) => CHARGE_GUN_STATE_MAP[text] || '',
    },
    {
      title: '系统时间',
      dataIndex: 'time',
      width: 180,
    },
  ];

  return (
    <CommonDrawer
      title="详情"
      open={open}
      onClose={onCancel}
      okBtnProps={{
        hidden: true,
      }}
      width={1200}
      destroyOnHidden
    >
      <div className={styles.detail}>
        <h3>充电站基础信息</h3>
        <Descriptions
          column={4}
          bordered
          size="small"
          labelStyle={{ width: '120px' }}
          items={items}
        />
        <h3>充电设备列表</h3>
        <div className={styles.table}>
          <CommonTable
            bordered
            rowKey="chargeDeviceId"
            columns={deviceColumns}
            dataSource={deviceList}
            pagination={false}
          />
        </div>
        <h3>充电枪列表</h3>
        <div className={styles.table}>
          <CommonTable
            bordered
            rowKey="chargeGunId"
            columns={gunColumns}
            dataSource={gunList}
            pagination={false}
          />
        </div>
      </div>
    </CommonDrawer>
  );
};

export default Detail;
